import React from 'react';
import { convertX, convertY, convertSize } from '../utils/responsive';
import '../css/event-card.css';

interface EventCardProps {
  eventName: string;
  info: string;
  startTime: string;
  endTime: string;
  trackingText: string;
  notes: string;
}

/**
 * 事件卡片组件
 * 定位: x=22, y=365, 尺寸: w=360, h=83 (原型坐标)
 * 样式: 圆角25px, 白色背景, 浅灰色边框1px, 跟随滚动
 */
const EventCard: React.FC<EventCardProps> = ({ eventName, info, startTime, endTime, trackingText, notes }) => {
  return (
    <div className="event-card" style={{
      position: 'absolute',
      left: convertX(22),
      top: convertY(355),
      width: convertSize(360),
      height: convertSize(70, false),
    }}>
      <div className="event-card__container">
        {eventName && <div className="event-card__eventname">{eventName}</div>}
        <div className="event-card__header-row">
          {info && <div className="event-card__info">{info}</div>}
          <div className="event-card__timesign">
            {startTime && <span className="event-card__time">{startTime}</span>}
            {trackingText && <div className="event-card__tracking">{trackingText}</div>}
            {endTime && <span className="event-card__time">{endTime}</span>}
          </div>
        </div>
        {notes && <div className="event-card__notes">{notes}</div>}
      </div>
    </div>
  );
};

export default EventCard;